<template>
  <div class="product-list">
    <div class="product-list-wrap">
      <AreaScreen :father-active="city" @city="getCity" />
      <Screen :highlight="filters" @classId="getData" />
      <div v-if="productData.length">
        <div class="product-list-content">
          <div class="product-list-title">
            <div
              v-for="item in sortData"
              :key="item.name"
              class="product-list-orderBy"
              :class="{'active':active===item.name}"
              @click="orderBy(item)"
            >
              {{ item.name }}
            </div>
          </div>
          <div v-customLoading="loading" class="product-list-content-wrap">
            <div
              v-for="item in productData"
              :key="item.product_id"
              class="product-list-content-item"
            >
              <ProjectList :project-data="item" />
            </div>
          </div>
        </div>
        <Pager
          :page-config="pageConfig"
          :home-tab-name="classId"
          :city="city"
          :order-field="orderField"
          @changeCurrentPage="changeCurrentPage"
        />
      </div>

      <div
        v-if="productData.length===0"
        class="product-noData"
      >
        <div class="product-noData-content">
          <img
            src="~assets/img/no-date.png"
            alt=""
          >
          <div class="product-noData-content-text">
            这里什么都没有~
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import AreaScreen from '@/components/areaScreen'
import Screen from '@/components/screen'
import ProjectList from '@/components/projectList'
import { getProductData } from '@/api/product'
import Pager from '@/components/pager'
export default {
  components: {
    AreaScreen,
    Screen,
    ProjectList,
    Pager
  },
  async asyncData({ isDev, route, store, env, params, query, req, res, redirect, error }) {
    const [product] = await Promise.all([
      getProductData('', 'intelligent', 1, 12).then(res => {
        return res
      })
    ])
    return {
      product
    }
  },
  data() {
    return {
      sortData: [
        {
          name: '智能排序',
          orderBy: 'intelligent'
        }, {
          name: '销量最多',
          orderBy: 'place_count'
        }, {
          name: '案例最多',
          orderBy: 'diary_group_count'
        }, {
          name: '价格最高',
          orderBy: 'selling_price_desc'
        }, {
          name: '价格最低',
          orderBy: 'selling_price_asc'
        }
      ],
      active: '智能排序',
      filters: {},
      orderField: 'intelligent',
      pageConfig: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
        pageTotal: 0
      },
      productData: [],
      area: {
        user_area: '',
        user_business: ''
      },
      city: '',
      classId: '',
      className: '',
      loading: false
    }
  },
  computed: {

  },
  created() {
    this.pageConfig.total = this.product.meta.total
    this.pageConfig.pageTotal = this.product.meta.last_page
    this.productData = this.product.data
    this.init()
  },
  mounted() {

  },
  methods: {
    init() {
      if (this.$route.query.filter) {
        this.filters = JSON.parse(this.$route.query.filter)
        this.city = this.$route.query.city_name
        this.orderField = this.$route.query.orderField
        this.getData({ id: this.filters.id, name: this.filters.name }, true)
        this.sortData.forEach((item) => {
          if (item.orderBy === this.orderField) {
            this.active = item.name
          }
        })
      }
    },
    getCity(city) {
      this.loading = true
      this.city = city
      this.$router.push({ query: { filter: JSON.stringify(this.filters), city_name: this.city, orderField: this.orderField }})
      this.isCitys(1)
    },
    orderBy(i) {
      this.loading = true
      this.active = i.name
      this.orderField = i.orderBy
      this.$router.push({ query: { filter: JSON.stringify(this.filters), city_name: this.city, orderField: this.orderField }})
      this.isCitys(1)
    },
    changeCurrentPage(page) {
      this.loading = true
      this.pageConfig.pageNo = page
      this.isCitys(page)
    },
    getData({ id, name }, isfalse) {
      this.loading = true
      if (!isfalse) {
        const obj = {
          name,
          id
        }
        this.filters = obj
        this.$router.push({ query: { filter: JSON.stringify(obj), city_name: this.city, orderField: this.orderField }})
        this.classId = id && id.length ? id[id.length - 1] : ''
        this.isCitys(1)
      } else {
        this.classId = id && id.length ? id[id.length - 1] : ''
        this.isCitys(1)
      }
    },
    isCitys(page) {
      this.area.user_area = this.city
      if (this.area.user_area !== '') {
        getProductData(this.classId, this.orderField, page, 12, JSON.stringify(this.area)).then((res) => {
          this.pageConfig.total = res.meta.total
          this.pageConfig.pageTotal = res.meta.last_page
          this.productData = res.data
          this.loading = false
        })
      } else {
        getProductData(this.classId, this.orderField, page, 12).then((res) => {
          this.pageConfig.total = res.meta.total
          this.pageConfig.pageTotal = res.meta.last_page
          this.productData = res.data
          this.loading = false
        })
      }
    }
  },
  head() {
    // console.log(this.pageConfig)
    return {
      title: `${this.$route.query && this.$route.query.city_name ? this.$route.query.city_name : '全部'}正规${this.filters.name ? this.filters.name[0] : '全部'}项目${this.filters.name ? this.filters.name[1] : '全部'}医院机构及${this.active}推荐榜单_第${this.pageConfig.pageNo ? this.pageConfig.pageNo : 1}页_容猫医美`,
      meta: [
        { hid: 'description',
          name: 'description',
          content: `${this.$route.query && this.$route.query.city_name ? this.$route.query.city_name : '全部'}正规${this.filters.name ? this.filters.name[0] : '全部'}项目${this.filters.name ? this.filters.name[1] : '全部'}医院机构及${this.active}推荐榜单由容猫医美为您提供，在容猫医美app里您可以轻松选择${this.$route.query && this.$route.query.city_name ? this.$route.query.city_name : '全部'}正规${this.filters.name ? this.filters.name[0] : '全部'}项目${this.filters.name ? this.filters.name[1] : '全部'}医院机构为您提供的一对一贴心医美整容服务。`
        }, {
          name: 'keywords', content: `${this.$route.query && this.$route.query.city_name ? this.$route.query.city_name : '全部'} , ${this.filters.name ? this.filters.name[0] : '全部'} ,${this.filters.name ? this.filters.name[1] : '全部'} `
        }, {
          'http-equiv': 'mobile-agent', content: 'format=html5', url: 'https://m.rongcat.com/product'
        }
      ]
    }
  }
}
</script>
<style scoped lang="scss">
.product-list {
  width: 100%;
  background: rgba(246, 246, 246, 1);
  padding-bottom: 20px;
  .product-list-wrap {
    width: 1190px;
    margin: 0 auto;
    overflow: hidden;
  }
}
.product-list-content {
  width: 1190px;
  background: rgba(255, 255, 255, 1);
  border-radius: 4px;
  margin-top: 10px;
  padding: 0 10px;
  overflow: hidden;
  .product-list-title {
    display: flex;
    margin-left: 30px;
    margin-top: 14px;
    .product-list-orderBy {
      font-size: 14px;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      line-height: 20px;
      margin-right: 50px;
    }
    .product-list-orderBy:hover {
      cursor: pointer;
    }
    .active {
      color: rgba(80, 76, 255, 1);
    }
  }
  .product-list-content-wrap {
    display: flex;
    flex-wrap: wrap;
    margin-top: 25px;
    .product-list-content-item{
      margin-left: 7px;
    }
  }
}
.product-noData {
  width: 1190px;
  height: 790px;
  background: rgba(255, 255, 255, 1);
  border-radius: 4px;
  margin-top: 10px;
  margin-bottom: 10px;
  position: relative;
  .product-noData-content {
    width: 242px;
    height: 210px;
    position: absolute;
    left: 50%;
    top:150px;
    margin-left: -121px;
    > img {
      width: 242px;
      height: 191px;
    }
    .product-noData-content-text{
      font-size:14px;
      font-family:PingFangSC-Regular,PingFang SC;
      font-weight:400;
      color:rgba(153,153,153,1);
      line-height:20px;
      text-align: center;
    }
  }
}
</style>
